<template>
	<div class="tollplaza">
		<div class="tollplaza-top">
			<div class="costleftdiv">
				<titleborder title="收费车道">
					<left />
				</titleborder>
			</div>
			<div class="costmaindiv">
				<normalborder>

					<mainmap />
				</normalborder>
			</div>
			<div class="costrightdiv">

				<titleborder title="治超设备">
					<right />
				</titleborder>

			</div>
		</div>
		<div class="tollplaza-bottom">
			<div class="costbottomdiv">
				<div class="costmainbottom">
					<titleborder title="告警信息">
						<bottom />
					</titleborder>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import titleborder from "../title-border.vue";
	import normalborder from "../normalborder.vue";
	import left from "./left";
	import right from "./right";
	import bottom from "./bottom";
	import mainmap from "./mainmap";
	export default {
		components: {
			left,
			right,
			bottom,
			mainmap,
			//  mainbottom,
			//  righ,

			titleborder,
			normalborder,
		},
		data() {
			return {};
		},
		computed: {

		},
		watch: {

		},
		mounted() {

		},
		methods: {

		},
	}
</script>

<style lang='scss' scoped>
	.tollplaza {
		// border: 1px solid #aaa;
		// background-color:#666;
		width: 100%;
		height: calc(100vh - 80px);
		display: flex;
		flex-direction: column;
		.tollplaza-top {
			flex: 7;
			display: flex;
			flex-direction: row;
			.costleftdiv {
				flex: 2;
				display: flex;
				flex-direction: column;
				padding: 0px 0px 0px 45px;
			}
			.costmaindiv {
				flex: 4;
				padding: 20px 10px 0px 10px;
				// padding: 50px;
			}
			.costrightdiv {
				flex: 2;
				display: flex;
				flex-direction: column;
				padding: 0px 45px 0px 0px;
			}
		}
		.tollplaza-bottom {
			flex: 4;
			display: flex;
			flex-direction: row;
			padding: 10px 45px 0px 45px;
			.costbottomdiv {
				display: flex;
				flex-direction: row;
				width: 100%;
				.costmainbottom {
					width: 100%;
					height: 98%;
				}
			}
		}
	}
</style>